<template id="buy">
    <div>
       <div class="buy">
           <div class="bi_buy">
               <h1>
                   <div class="buy_1"><img class='img' src="../image/x_left.png" alt=""></div>
                   <span id="buy_3">{{tag1_ad.title}}</span>
                   <div class="buy_2"><img class="img_1" src="../image/x_right.png" alt=""></div>
               </h1>
               <p>新鲜美味 唇齿留香</p>
           </div>

           <div class="tag_1">
               <div class="orange">
                   <img :src="tag1_ad.url" alt="">
               </div>
              <!-- <v-common></v-common>-->
               <div class="buy_list">
                   <dl v-for="m in tag1_list">
                       <dt>
                           <img class="img_l1"  v-lazy="m.thumb" alt="" @click="getDetail(m.id)">
                       </dt>
                       <dd>{{m.name}}</dd>
                       <dd><span>{{m.shop_price}}<time>{{m.goods_share}}</time></span><img src="../image/add.jpg" alt="" @click="addCart(m.id,m.thumb)"></dd>
                   </dl>

               </div>
            </div>

           <div class="tag_2">
               <div class="orange">
                   <img :src="tag2_ad.url" alt="">
               </div>
               <div class="buy_list">
                   <dl v-for="m in tag2_list">
                       <dt>
                           <img class="img_l1" :src="m.thumb" alt="" @click="getDetail(m.id)">
                       </dt>
                       <dd>{{m.name}}</dd>
                       <dd><span>{{m.shop_price}}<time>{{m.goods_share}}</time></span><img src="../image/add.jpg" alt="" @click="addCart(m.id,m.thumb)"></dd>
                   </dl>

               </div>
            </div>

       </div>
    </div>
</template>
<script>
    export default {
        name :'buy',
        components:{
        },
        data(){
            return{
             /*   id:this.$route.query.this.ma.id,*/
                tag1_ad:[],
                tag1_list:[],
                tag2_ad:[],
                tag2_list:[]
            }
        },
        mounted:function(){
			let mode1 = 'one';
			this.GLOBAL.getList(this,mode1,1);

            let mode2 = 'two';
            this.GLOBAL.getList(this,mode2,2);
        },
        methods:{
           /* login:function(){
                this.$router.push('../login');
            },*/
            getDetail:function(id){
                this.$router.push('/shopDetails?goods_id=' + id);
            },
			addCart:function (goods_id,image, number = 1) {
				this.GLOBAL.addCart(this,goods_id,number);
				this.GLOBAL.get_te(image)
            }
        },
        computed: {
            // 计算属性的 getter
            /*reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }*/
        },

    }
</script>
<style>
    .flyer-img{height:50px;width:50px;border-radius: 50%;}

    .buy_list{
        min-height:2.30rem;
        width:100%;
        display:flex;
       /* flex-wrap: wrap;*/
        justify-content:flex-start;
        margin-bottom:0.3rem;
    }
    .buy_list dl{
        height:2.20rem;
        width:2.11rem;
       /* flex:1;*/
    }
    .buy_list dl dt{
        height:1.54rem;
        width:2.11rem;
    }
    .buy_list dl dd:nth-of-type(1){
        height:0.46rem;
        width:2.11rem;
        color:#333;
        font-size:0.2rem;
        text-indent: 0.23rem;
        line-height:0.46rem;
        overflow: hidden; /*!*自动隐藏文字*!*/
        text-overflow: ellipsis;/*!*文字隐藏后添加省略号*!*/
        white-space: nowrap;/*!*强制不换行*!*/
    }
    .buy_list dl dd:nth-of-type(2){
        width:2.11rem;
        height:0.46rem;
        position: relative;


    }
    .buy_list dl dd:nth-of-type(2) span{
        color:#ff7e67;
        font-size:0.18rem;
        display:block;
       /* margin-left:12px;*/
        text-indent: 0.26rem;
        width: 2.5rem;
    }
    .buy_list dl dd:nth-of-type(2) img{
        display:block;
        height:0.23rem;
        width:0.23rem;
        position:absolute;
        top:-1px;
        left:1.68rem;
    }
    .buy_list dl dt img{
        height:1.54rem;
        width:1.54rem;
        display:block;
        margin:0 auto;
    }
   /*buy*/
    .buy{
    min-height:2rem;
    width:100%;
    border-bottom:10px solid #f5f4f2;
}
    .bi_buy{
        margin:0.4rem 0;
        width:100%;
        height:0.42rem;
    }
    .buy_1{
        height: 0.3rem;
        width:auto;
        flex:1;
    }
    .buy_2{
        height: 0.3rem;
        flex:1;

    }
    #buy_3{
        display:block;
        font-size: 0.32rem;
        color: #4a4a4a;
        line-height: 0.3rem;
        width:auto;
        text-align:center;
    }

    .bi_buy h1{
        display:flex;
        color: #4a4a4a;
        height: 0.42rem;
       /* line-height: 0.42rem;*/
       /* width:100%;*/
        /*position: relative;*/

    }
    /*.bi_buy img{
        display:block;
        width:1.89rem;
        height:0.42rem;
      !*  position:absolute;*!
    }*/
    .buy_1 img{
       /* top:0;
        left: 0.25rem;*/
        display:block;
        width:1.80rem;
        height:0.3rem;
        float:right;
    }
    .buy_2 img{
        /*top:0;
        right: 0.4rem;;*/
        display:block;
        width:1.80rem;
        height:0.3rem;
        float:left;
    }
    /*1111*/
.buy p{
    height:0.5rem;
    line-height:0.3rem;
    text-align:center;
    color:#afafaf;
    font-size:0.22rem;

}
    .orange{
        height:2.8rem;
        width:100%;
        margin-bottom: 0.3rem;
    }
.orange img{
    height:2.8rem;
    width:100%;
    display:inline-block;
}
</style>
